{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<link rel="stylesheet" href="{% static 'pear_layui/component/layui/css/layui.css' %}">
<link rel="stylesheet" href="{% static 'css/loading/animate.css' %}">
<link rel="stylesheet" href="{% static 'css/loading/global.css' %}">
<link rel="stylesheet" href="{% static 'css/loading/loading.css' %}">
<style type="text/css">
    #myDiagramDiv {
        background-color: #F8F8F8;
        border: 1px solid #aaa;
    }
</style>
<body>
<div id="myDiagramDiv"
     style="background-color: white; border: 1px solid black; width: 100%; height: 700px; position: relative; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); cursor: auto;">
    <canvas tabindex="0" width="1100" height="400"
            style="position: absolute; top: 0px; left: 0px; z-index: 2; user-select: none; width: 904px; height: 698px; cursor: auto;"></canvas>
    <div style="position: absolute; overflow: auto; width: 904px; height: 698px; z-index: 1;">
        <div style="position: absolute; width: 1px; height: 1px;"></div>
    </div>
</div>
</body>
<script src="{% static 'js/go.js' %}" type="text/javascript" charset="utf-8"></script>
<script src="{% static 'js/jquery.min.js' %}" type="text/javascript" charset="utf-8"></script>
<script src="{% static 'js/loading.js' %}" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

    // 定义右击事件菜单方法
    function browse_data(e, obj) {
        var contextmenu = obj.part;
        var nodedata = contextmenu.data;
        var node_name = nodedata.key;  // 节点标题
        //查看当前节点对应表数据
        window.location.href = "http://127.0.0.1:8000/cube_api/app-cube-browser-data/?table_name=" + node_name;
    }

    function relation_table(e, obj) {
        loading3();
        var contextmenu = obj.part;
        var nodedata = contextmenu.data;
        var node_name = nodedata.key;  // 节点标题
        $.ajax({
            url: "{% url 'app-cube-relation-E-R' %}",
            method: 'get',
            data: {'cube_name': '{{ cube_name }}', 'node_name': node_name},
            success: function (r) {
                removeLoading('test');
                //console.log(r)
                init(r.relation, r.line);
            }
        })
    }

    var myGo = go.GraphObject.make;  // for conciseness in defining templates
    myDiagram =
        myGo(go.Diagram, "myDiagramDiv",  // must name or refer to the DIV HTML element
            {
                allowDelete: false,
                allowCopy: false,
                layout: myGo(go.ForceDirectedLayout),
                "undoManager.isEnabled": true
            });

    function init(myrelation, myline) {
        if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this

        var colors = {
            'white': '#ffffff',
            'red': '#be4b15',
            'green': '#52ce60',
            'blue': '#6ea5f8',
            'yellow': '#FFD700',
            'lightred': '#fd8852',
            'lightblue': '#afd4fe',
            'lightgreen': '#b9e986',
            'pink': '#faadc1',
            'purple': '#d689ff',
            'orange': '#fdb400'
        }
        // the template for each attribute in a node's array of item data
        var itemTempl =
            myGo(go.Panel, "Horizontal",
                myGo(go.Shape, "RoundedRectangle",
                    {
                        desiredSize: new go.Size(15, 15),
                        strokeJoin: "round",
                        strokeWidth: 3,
                        stroke: null,
                        margin: 2
                    },
                    new go.Binding("figure", "figure"),
                    new go.Binding("fill", "color"),
                    new go.Binding("stroke", "color")
                ),
                myGo(go.TextBlock,
                    {
                        stroke: "#333333",
                        font: "bold 14px sans-serif"
                    },
                    new go.Binding("text", "name")),
            );
        // define the Node template, representing an entity
        myDiagram.grid.visible = true;  // 背景网格
        myDiagram.nodeTemplate =
            myGo(go.Node, "Auto",  // the whole node panel
                {
                    selectionAdorned: true,
                    resizable: true,
                    layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized,
                    fromSpot: go.Spot.AllSides,
                    toSpot: go.Spot.AllSides,
                    isShadowed: true,
                    shadowOffset: new go.Point(3, 3),
                    shadowColor: "#C5C1AA"
                },
                new go.Binding("location", "location").makeTwoWay(),
                // whenever the PanelExpanderButton changes the visible property of the "LIST" panel,
                // clear out any desiredSize set by the ResizingTool.
                new go.Binding("desiredSize", "visible", function (v) {
                    return new go.Size(NaN, NaN);
                }).ofObject("LIST"),
                // define the node's outer shape, which will surround the Table
                myGo(go.Shape, "RoundedRectangle",
                    {fill: 'white', stroke: "#eeeeee", strokeWidth: 3},
                    new go.Binding("fill", "color")),
                myGo(go.Panel, "Table",
                    {margin: 8, stretch: go.GraphObject.Fill},
                    myGo(go.RowColumnDefinition, {row: 0, sizing: go.RowColumnDefinition.None}),
                    // the table header
                    myGo(go.TextBlock,
                        {
                            row: 0, alignment: go.Spot.Center,
                            margin: new go.Margin(0, 24, 0, 2),  // leave room for Button
                            font: "bold 16px sans-serif"
                        },
                        new go.Binding("text", "key")),
                    // the collapse/expand button
                    myGo("PanelExpanderButton", "LIST",  // the name of the element whose visibility this button toggles
                        {row: 0, alignment: go.Spot.TopRight}),
                    // the list of Panels, each showing an attribute
                    myGo(go.Panel, "Vertical",
                        {
                            name: "LIST",
                            row: 1,
                            padding: 3,
                            alignment: go.Spot.TopLeft,
                            defaultAlignment: go.Spot.Left,
                            stretch: go.GraphObject.Horizontal,
                            itemTemplate: itemTempl,
                            visible: false,  // 字段列表是否开启
                        },
                        new go.Binding("itemArray", "items"))
                ),  // end Table Panel


                // 添加右击按钮
                {
                    contextMenu:     // define a context menu for each node
                        myGo("ContextMenu",  // that has one button
                            myGo("ContextMenuButton",
                                myGo(go.TextBlock, "浏览数据"),
                                {click: browse_data}),
                            myGo("ContextMenuButton",
                                myGo(go.TextBlock, "关联表"),
                                {click: relation_table})
                            // more ContextMenuButtons would go here
                        )  // end Adornment
                },
            );  // end Node
        // define the Link template, representing a relationship
        myDiagram.linkTemplate =
            myGo(go.Link,  // the whole link panel
                {
                    selectionAdorned: true,
                    layerName: "Foreground",
                    reshapable: true,
                    routing: go.Link.AvoidsNodes,
                    corner: 5,
                    curve: go.Link.JumpOver
                },
                myGo(go.Shape,  // the link shape
                    {stroke: "#303B45", strokeWidth: 1}),
                myGo(go.Shape,   // the arrowhead
                    {toArrow: "OpenTriangle", fill: null})
            );
        // create the model for the E-R diagram
        var nodeDataArray = myrelation;
        console.log(nodeDataArray);
        var linkDataArray = myline;
        //console.log(nodeDataArray);
        for (let i = 0; i < nodeDataArray.length; i++) {
            if (nodeDataArray[i].key.indexOf("Dim_") != -1) {
                nodeDataArray[i].color = colors.blue
            } else {
                nodeDataArray[i].color = colors.yellow
            }
            // 每个节点下字段背景色
            for (let j = 0; j < nodeDataArray[i].items.length; j++) {
                nodeDataArray[i].items[j].color = colors.white;
                nodeDataArray[i].items[j].fill = colors.white;
            }
        }
        myDiagram.model = myGo(go.GraphLinksModel,
            {
                copiesArrays: true,
                copiesArrayObjects: true,
                nodeDataArray: nodeDataArray,
                linkDataArray: linkDataArray
            });
    }

    // E-R图页面初始化
    function loading3() {
        $('body').loading({
            loadingWidth: 120,
            title: '',
            name: 'test',
            discription: '加载中...',
            direction: 'column',
            type: 'origin',
            originDivWidth: 40,
            originDivHeight: 40,
            originWidth: 6,
            originHeight: 6,
            smallLoading: false,
            loadingMaskBg: 'rgba(0,0,0,0.2)'
        });
    }

    loading3();

    $.ajax({
        url: "{% url 'Cube-E-R-API' %}",
        method: "get",
        data: {'cube_name': '{{ cube_name }}'},
        success: function (r) {
            removeLoading('test');
            // if(window.init) {init();}
            init(r.relation, r.line);
        }
    });
</script>
</html>
